<template>
  <view>
    <template v-if="list.length">
      <view v-for="(item,index) in list" :key="index" class="card margin-top-30" hover-class="card-hover" :hover-stay-time="70" @click="edit(item)">
        <l-data-cell label="支付日期" padding="15rpx 28rpx" :value="item.paymentDate" />
        <l-data-cell label="付款金额" padding="15rpx 28rpx" :value="item.amountCollected + '元'" />
        <l-data-cell label="支付方式" padding="15rpx 28rpx" :value="method(item.paymentMethod)" />
        <l-data-cell label="是否开票" padding="15rpx 28rpx" :value="invoice(item.invoice)" />
        <l-data-cell label="经办人" padding="15rpx 28rpx" :value="item.handler" />
        <l-data-cell label="票据/截图" padding="15rpx 28rpx" :img="item.screenshotUrl" />
      </view>
      <l-footer :has-more="hasMore" />
    </template>
    <l-no-data v-else type="order" text="暂无数据" />
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
import { dateFormat } from '@/common/util'
import { pageCollectionDetails, getOneHistoricalBill } from '../../api'
import { paymentMethods, invoiceList } from '../../index'
export default {
  name: 'PaymentDetails',
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  computed: {
    method() {
      return (status) => {
        for (let i = 0; i < paymentMethods.length; i++) {
          const item = paymentMethods[i]
          if (item.value === status) return item.label
        }
        return '暂无'
      }
    },
    invoice() {
      return (status) => {
        for (let i = 0; i < invoiceList.length; i++) {
          const item = invoiceList[i]
          if (item.value === status) return item.label
        }
        return '暂无'
      }
    }
  },
  watch: {
    info: {
      handler() {
        this.getList()
      },
      deep: true
    }
  },
  methods: {
    async getList() {
      const [err, res] = await pageCollectionDetails({
        username: this.info.username,
        affiliatedBill: this.info.affiliatedBill,
        current: this.page,
        limit: this.pageSize
      })
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      let list = data.records
      if (!list) list = []
      if (list.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)
      this.$emit('getSize', data.total)
    },
    reload() {
      this.hasMore = true
      this.page = 1
      this.getList()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    async edit(e) {
      const paymentDate = dateFormat()
      const [err, res] = await getOneHistoricalBill({
        username: this.info.username,
        affiliatedBill: e.affiliatedBill
      })
      if (!this.$http.errorCheck(err, res)) return false
      const info = res.data.data
      const obj = {
        id: '',
        affiliatedBill: '',
        amountCollected: '',
        payingCustomer: '',
        paymentDate,
        paymentMethod: '',
        handler: '',
        invoice: '',
        remarks: '',
        screenshotUrl: '',
        amountRepaid: ''
      }
      Object.keys(obj).forEach((key) => {
        if (e[key] || e[key] === 0) obj[key] = e[key]
      })
      obj.noRecorded = info.noRecorded
      obj.recorded = info.recorded + e.amountCollected
      obj.repayments = info.repayments
      obj.amountRepaid = obj.recorded - obj.repayments
      this.setPaymentDetail(obj)
      this.jump('/user/payment-details/payment-details?amountRepaid=' + obj.amountRepaid.toFixed(2) + '&noRecorded=' + obj.noRecorded.toFixed(2) + '&type=edit')
    },
    ...mapMutations({
      setPaymentDetail: 'user/setPaymentDetail'
    })
  }
}
</script>

<style scoped>

</style>
